<template>
	<div class="content">
		<div class="articleType">
			<input type="text" placeholder="选择文章类型" disabled="true" @click="selectShow = true" v-model="artcleType">
		</div>
		<div class="hd">		
			<div class="title">
				<input type="text" v-model="data.articleTitle" placeholder="标题">
			</div>
			<div class="value">
				<editor id="editor" v-model="data.content" class="ql-container" placeholder="请输入文章内容" @ready="onEditorReady"></editor>
			</div>
			<div class="imgbox">
				<u-upload :action="action" :header="header" :form-data="{type:12}" :custom-btn="true" max-count="1" :file-list="filelist" @on-success="uploadSuccess">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image mode="widthFix" src="@/static/img/articleFirst.png"></image>
					</view>
				</u-upload>
				<image mode="widthFix"  src="@/static/img/articleEdior.png" @click="chooseImg"></image>
			</div>
		</div>
		<div class="fd">
			<input type="text" v-model="data.reprint" :disabled="checked" placeholder="输入作者名，转载原文处（必填）" />
			<view class="switch">
				<span>原创</span>
				<u-switch v-model="checked" size="40" @change="checkChange"></u-switch>
			</view>
		</div>
		<u-modal v-model="showModal" :show-cancel-button="true" @confirm="Modalconfirm" :content="showContent"></u-modal>
		<div class="btns">
			<span @click="showModalDialog(1)">保存</span>
			<span @click="showModalDialog(2)">发送</span>
		</div>
		
		<!-- 下拉框 -->
		<u-select v-model="selectShow" @confirm="confirm" :list="defaultArr"></u-select>
	</div>
</template>
<script>
	import http from '@/common/http/interface.js'
	export default{
		data(){
			return {
				checked:false,
				data:{},
				action:http.config.baseUrl+'/File/multipleFiles',
				header:{
					"Access-Token": localStorage.token
				},
				showModal:false,
				showContent:'',
				filelist:[],
				selectShow: false,
				defaultArr:[],
				typeId:'',
				artcleType: '',
			}
		},
		onLoad(options){
			this.getTypeList();
			if(options.id){
				this.editId = options.id
				this.$api.ArticleInfo(options.id).then((res)=>{
					this.data = res.data.result
					this.filelist = [{url:res.data.result.coverImg}]
					this.checked = res.data.result.original == 2 ? false : true
					this.data.reprint = res.data.result.original == 2 ? res.data.result.reprint : res.data.result.authName
					setTimeout(()=>{
						const typeName = this.defaultArr.filter((a)=>{
							return a.value == res.data.result.typeId
						})
						this.artcleType = typeName[0].label
						uni.createSelectorQuery().select('#editor').context((a) => {this.editorCtx = a.context; this.editorCtx.setContents({html: res.data.result && res.data.result.content || ''})}).exec();
					},200)
				})
			}
		},
		methods:{
			// 获取文章类型
			getTypeList(){
				const _this = this
				_this.$api.ArticleTypelist().then((res) => {
					_this.defaultArr = res.data.result && res.data.result.filter((a) => {
						a.label =  a.articleTypeName
						a.value =  a.id
						return a.articleTypeName != '全部'
					})	
				})
			},
			// 下拉框确定
			confirm(e){
				this.artcleType = e[0].label;
				this.data.typeId = e[0].value;
			},
			checkChange(e){
				if(this.checked){
					this.$set(this.data,'reprint',JSON.parse(localStorage.userInfo).realName)
				}
			},
			onEditorReady(){
				uni.createSelectorQuery().select('#editor').context((res) => {
				  this.editorCtx = res.context
				}).exec()
			},
			// 上传封面成功
			uploadSuccess(data, index, lists, name){
				this.data.coverImg = data.result[0]
			},
			chooseImg(){
				const _this = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //相机
					success: function (res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: http.config.baseUrl+'/File/multipleFiles', 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': '12'
							},
							header:{
								"Access-Token": localStorage.token
							},
							success: (uploadFileRes) => {
								_this.editorCtx.insertImage({src: JSON.parse(uploadFileRes.data).result[0] ,alt: '图像'})
							}
						});
					}
				});
			},
			showModalDialog(e){
				if(!this.data.typeId) {
					uni.showToast({title:'请选择文章类型',icon:'none'})
					return;
				}
				if(!this.data.articleTitle){
					uni.showToast({title:'请输入标题',icon:'none'})
					return;
				}
				if(!this.data.content){
					uni.showToast({title:'请输入文章内容',icon:'none'})
					return;
				}
				if(!this.data.coverImg){
					uni.showToast({title:'请上传封面图片',icon:'none'})
					return;
				}
				if(!this.checked && !this.data.reprint){
					uni.showToast({title:'请输入作者名，转载原文处',icon:'none'})
					return;
				}
				if(e==2){
					this.showModal = true
					this.showContent = '发送后不能修改'
					return;
				}
				this.save(1)
			},
			Modalconfirm(){
				this.save(2)
			},
			save(e){
				this.data.original = this.checked?1:2
				this.data.content = this.data.content.detail ? this.data.content.detail.html : this.data.content
				this.data.status = e
				if(this.data.original == 1) {
					delete this.data.reprint
				}
				if(this.editId){
					this.$api.ArticleUpdate(this.editId,this.data).then((res)=>{
						if(res.data.returnCode == 200){
							uni.showToast({title: '保存成功',icon: 'none'})
							setTimeout(()=>{
								uni.navigateTo({
									url: '/pages/quickly/article/articlelist'
								})
							},1000)
						}else{
							uni.showToast({title: res.data.message,icon: 'none'})
						}
					})
				}else{
					this.$api.ArticleSave(this.data).then((res)=>{
						if(res.data.returnCode == 200){
							uni.showToast({title: '保存成功',icon: 'none'})
							setTimeout(()=>{
								uni.navigateTo({
									url: '/pages/quickly/article/articlelist'
								})
							},1000)
						}else{
							uni.showToast({title: res.data.message,icon: 'none'})
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
.content{
	min-height: calc(100vh - 88upx);
	background: #f8f8f8;
	.hd{
		background: #fff;
		padding:0 24upx;
		.title{
			height: 86upx;
			line-height: 86upx;
			input{
				height: 100%;
				border-bottom: 1upx solid #E0E0E0;
			}
		}
		#editor {
			width: 100%;
			height: 530upx;
			padding: 24upx;
			font-style: normal;
		}
		.imgbox{
			display: flex;
			image{
				width: 126upx;
				margin:25upx 25upx 25upx 0 ;
			}
		}
	}
	.fd{
		padding: 0 25upx;
		margin-top: 24upx;
		height: 94upx;
		background: #fff;
		display: flex;
		align-items: center;
		line-height: 94upx;
		input{
			flex:1;
		}
		.switch{
			display: flex;
			align-items: center;
			span{
				color: #333;
				margin-right: 10upx;
			}
		}
	}
	.btns{
		padding:0 46upx;
		display: flex;
		justify-content: space-between;
		margin-top: 190upx;
		span{
			width: 281upx;
			height: 70upx;
			line-height: 70upx;
			text-align: center;
			border-radius: 70upx;
			color: #fff;
			font-size: 30upx;
			&:nth-of-type(1){
				background: #FF8F23;
			}
			&:nth-of-type(2){
				background: #38CB97;
			}
		}
	}
	/deep/ .u-list-item{
		width: 126upx !important;
		height: 126upx !important;
		margin: 0;
		border:  0;
		margin-right: 24upx;
	}
	
	.articleType {
		height: 96upx;
		width: 100%;
		margin-bottom: 24upx;
		line-height: 96upx;
		background-color: #FFFFFF;
		padding: 0 24upx;
		box-sizing: border-box;
		input {
			height: 100%;
		}
	}
}

</style>
